<script lang="ts">
import { ref, onMounted } from 'vue';
import { cityStore } from '@/stores/city';
import { showToast } from 'vant';
import router from "@/router";
import { saveStore } from "../stores/city";
export default {
    setup() {
        const goPage = () => {
            router.back();
        }

        let store = saveStore();


        let fini:any = ref("准备装修");



        //获取pinia的地区名字
        let city: string = cityStore().$state.city

        // 开工
        let flan = ref(false); // 开工时间显示隐藏
        const currentDate = ref(['2021', '01']); // 日期范围
        const columnsType: any = ['year', 'month']; // 日期范围
        let starttime: any = ref(null); // 开工时间
        const timeclick = () => { // 点击开工时间
            flan.value = true;
        }
        const confirmFn = (selectedValues: any) => { // 点击确定
            starttime.value = selectedValues.selectedValues[0] + " 年 " + selectedValues.selectedValues[1] + " 月 ";
            flan.value = false;
            if (starttime2.value !== null) {
                alter();
            }
        }
        const cancelFn = () => { // 点击取消
            flan.value = false;
            flan2.value = false;
        }


        // 入住
        let flan2 = ref(false); // 入住时间显示隐藏
        let starttime2: any = ref(null); // 入住时间
        const timeclick2 = () => { // 点击入住时间
            flan2.value = true;
        }
        const confirmFn2 = (selectedValues: any) => { // 点击确定
            starttime2.value = selectedValues.selectedValues[0] + " 年 " + selectedValues.selectedValues[1] + " 月 ";
            flan2.value = false;
            if (starttime.value !== null) {
                alter();
            }
        }


        // 入住时间必须晚于等于装修时间
        const alter = () => {
            if (parseInt(starttime.value.slice(0, 4)) > parseInt(starttime2.value.slice(0, 4))) {
                starttime2.value = starttime.value;
            } else if (parseInt(starttime.value.slice(0, 4)) == parseInt(starttime2.value.slice(0, 4))) {
                if (parseInt(starttime.value.slice(7, 9)) > parseInt(starttime2.value.slice(7, 9))) {
                    starttime2.value = starttime.value;
                }
            }
        }


        // 房屋状态
        let statusd: any = ref(null);
        let flan3 = ref(false); // 房屋状态显示隐藏
        let state = () => {
            flan3.value = true;
        }
        const columns = [
            { text: '毛坯房', value: '毛坯房' },
            { text: '精装房', value: '精装房' },
            { text: '老房重装', value: '老房重装' },
        ];
        const onConfirm = ({ selectedValues }: any) => {
            showToast(`当前值: ${selectedValues.join(',')}`);
            statusd.value = selectedValues.join(',');
            flan3.value = false;
        };
        const onCancel = () => {
            showToast('取消');
            flan3.value = false;
            flan4.value = false;
            flan5.value = false;
            flan6.value = false;
        }


        // 户型
        let houstypes: any = ref(null);
        let flan4 = ref(false);
        let housetype = () => {
            flan4.value = true;
        }
        let hall: any = [];
        let columns2: any = [];
        for (var i = 0; i <= 9; i++) {
            hall.push({
                roomname: i,
                roomes: [
                    {
                        roomname: '厅',
                    }
                ]
            });
        }
        for (var j = 0; j <= 9; j++) {
            columns2.push({
                roomname: j,
                roomes: [
                    {
                        roomname: '室',
                        roomes: hall
                    }
                ],
            })
        }
        let onconfirm = (selectedValues: any) => {
            let str = '';
            selectedValues.selectedValues.forEach((item: any) => {
                str += item + ' ';
            })
            houstypes.value = str;
            flan4.value = false;
        }
        const customFieldName = {
            text: 'roomname',
            value: 'roomname',
            children: 'roomes',
        };


        // 
        let space: any = ref('');
        let money: any = ref('');
        let change = () => {
            if (space.value.length >= 4) {
                space.value = space.value.slice(0, 4);
            }
            if (money.value.length >= 4) {
                money.value = money.value.slice(0, 4);
            }
        }


        // 常住人口
        let popula: any = ref(null);
        let flan5 = ref(false);
        const population = () => {
            flan5.value = true;
        }
        const columns3: any = [];
        for (var k = 1; k < 16; k++) {
            columns3.push({
                text: k,
                value: k
            })
        }
        const onConfirm2 = ({ selectedValues }: any) => {
            showToast(`当前值: ${selectedValues.join(',')}`);
            popula.value = selectedValues.join(',');
            flan5.value = false;
        };


        // 宠物
        let pet: any = ref(null);
        let flan6 = ref(false);
        let petClick = () => {
            flan6.value = true;
        }
        let pettype: any = [];
        let column2: any = [];
        for (var i = 0; i <= 9; i++) {
            pettype.push({
                roomname: i,
                roomes: [
                    {
                        roomname: '狗',
                    }
                ]
            });
        }
        for (var j = 0; j <= 9; j++) {
            column2.push({
                roomname: j,
                roomes: [
                    {
                        roomname: '猫',
                        roomes: pettype
                    }
                ],
            })
        }
        let onconfirm2 = (selectedValues: any) => {
            let str = '';
            selectedValues.selectedValues.forEach((item: any) => {
                str += item + ' ';
            })
            pet.value = str;
            flan6.value = false;
        }


        // 保存
        let save = () => {
            let arr = [
                { starttime: starttime.value },
                { starttime2: starttime2.value },
                { statusd: statusd.value },
                { houstypes: houstypes.value },
                { space: space.value },
                { money: money.value },
                { popula: popula.value },
                { pet: pet.value },
                { fini: fini.value}
            ]
            store.$patch((state: any) => {
                state.save = arr;
            })
            goPage();
        }


        // 进入路由显示保存的值
        const saveFun = () => {
            let Store = saveStore().$state.save;
            starttime.value = Store[0].starttime; // 开工时间
            starttime2.value = Store[1].starttime2; // 入住时间
            statusd.value = Store[2].statusd; // 
            houstypes.value = Store[3].houstypes; // 
            space.value = Store[4].space; // 
            money.value = Store[5].money; // 
            popula.value = Store[6].popula; // 
            pet.value = Store[7].pet; // 
            fini.value = Store[8].fini; //
        }

        onMounted(() => {
            saveFun();
        })


        return {
            goPage,

            fini,

            city,

            minDate: new Date(2018, 0, 1),
            maxDate: new Date(2025, 5, 1),
            currentDate,
            columnsType,
            flan,
            timeclick,
            confirmFn, // 点击确定
            cancelFn,  // 点击取消
            starttime,

            flan2,
            timeclick2,
            confirmFn2, // 点击确定
            starttime2,

            statusd,
            flan3,
            state,
            columns,
            onCancel,
            onConfirm,

            housetype,
            houstypes,
            flan4,
            columns2,
            customFieldName,
            onconfirm,

            space,
            money,
            change,

            population,
            popula,
            flan5,
            columns3,
            onConfirm2,

            column2,
            flan6,
            pet,
            petClick,
            onconfirm2,

            save
        }
    }
}
</script>

<template>
    <div class="message">
        <div class="message_title">
            <img @click="goPage" src="../assets/images/Message/com_taobao_nb_sdk_web_view_title_bar_back.9.png">
            装修信息
        </div>
        <img src="../assets/images/Message/bg_decorate_top.png">
        <div class="message_con">
            <div class="item">
                装修阶段
                <span :class="['options' , fini=='准备装修'?'option':'']" @click="fini='准备装修'">准备装修</span>
                <span :class="['options' , fini=='正在装修'?'option':'']" @click="fini='正在装修'">正在装修</span>
                <span :class="['options' , fini=='不需要装修'?'option':'']" @click="fini='不需要装修'">不需要装修</span>
            </div>
            <div class="item">
                开工时间
                <span @click="timeclick">{{ starttime }}<i v-if="!starttime">请选择</i><img
                        src="../assets/images/Message/ic_brand_more.png"></span>
                <van-date-picker v-model="currentDate" title="选择年月" :min-date="minDate" :max-date="maxDate"
                    :columns-type="columnsType" v-show="flan" @confirm="confirmFn" @cancel="cancelFn" />
            </div>
            <div class="item">
                城市房屋
                <span>{{ city }}<img src="../assets/images/Message/ic_brand_more.png"></span>
            </div>
            <div class="item">
                房屋状态
                <span @click="state">{{ statusd }} <i v-if="!statusd">请选择</i><img
                        src="../assets/images/Message/ic_brand_more.png"></span>
                <van-picker title="房屋状态" v-show="flan3" :columns="columns" @confirm="onConfirm" @cancel="onCancel" />
            </div>
            <div class="item">
                城市户型
                <span @click="housetype">{{ houstypes }} <i v-if="!houstypes">请选择</i><img
                        src="../assets/images/Message/ic_brand_more.png"></span>
                <van-picker title="房屋户型" v-show="flan4" :columns="columns2" :columns-field-names="customFieldName"
                    @confirm="onconfirm" @cancel="onCancel" />
            </div>
            <div class="item">
                城市面积
                <span><input type="text" v-model="space" placeholder="请选择" @input.trim="change"><i>平米</i></span>
            </div>
            <div class="item">
                装修预算
                <span><input type="text" v-model="money" placeholder="请选择" @input.trim="change"><i>万元</i></span>
            </div>
            <div class="item">
                常住人口
                <span @click="population">{{ popula }} <i v-if="!popula">请选择</i><img
                        src="../assets/images/Message/ic_brand_more.png"></span>
                <van-picker title="常住人口" v-show="flan5" :columns="columns3" @confirm="onConfirm2" @cancel="onCancel" />
            </div>
            <div class="item">
                宠物
                <span @click="petClick"> {{ pet }} <i v-if="!pet">请选择</i><img
                        src="../assets/images/Message/ic_brand_more.png"></span>
                <van-picker title="房屋户型" v-show="flan6" :columns="column2" :columns-field-names="customFieldName"
                    @confirm="onconfirm2" @cancel="onCancel" />
            </div>
            <div class="item">
                入住时间
                <span @click="timeclick2">{{ starttime2 }} <i v-if="!starttime2">请选择</i><img
                        src="../assets/images/Message/ic_brand_more.png"></span>
                <van-date-picker v-model="currentDate" title="选择年月" :min-date="minDate" :max-date="maxDate"
                    :columns-type="columnsType" v-show="flan2" @confirm="confirmFn2" @cancel="cancelFn" />
            </div>
        </div>
        <div class="save"><span @click="save">保存信息</span></div>
    </div>
</template>

<style lang="scss" scoped>
.message_title {
    position: relative;
    text-align: center;
    height: 40px;
    line-height: 40px;
    border-bottom: 1px solid #ccc;
    font-size: 16px;
    font-weight: 500;

    img {
        width: 20px;
        height: 20px;
        display: block;
        position: absolute;
        top: 10px;
        left: 10px;
    }
}

.message_con {
    padding: 0 12px;

    .item {
        height: 50px;
        line-height: 50px;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;

        .options {
            display: inline-block;
            height: 20px;
            line-height: 20px;
            padding: 5px 12px;
            border-radius: 20px;
            background-color: #ebeef3;
            font-size: 14px;
        }

        .option {
            border: 1px solid #58a4a1;
            color: #3db3ae;
            background-color: #3db3ae24;
        }

        span {
            display: flex;
            align-items: center;
            margin-right: 5px;

            img {
                width: 10px;
                height: 15px;
                display: block;
                margin-left: 10px;
            }

            i {
                color: #898989;
                font-size: 15px;
            }

            input {
                width: 50px;
                height: 30px;
                border: none;
                margin-top: -3px;
            }

            input::placeholder {
                font-size: 15px;
            }
        }

        &:last-child {
            border: none;
        }
    }
}

.van-picker {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100%;
}

.save {
    width: 100%;
    height: 40px;
    padding: 0 12px;
    box-sizing: border-box;

    span {
        display: block;
        width: 100%;
        height: 100%;
        background-color: #21afa9;
        color: #fff;
        text-align: center;
        line-height: 40px;
        border-radius: 20px;
    }
}
</style>